<template>
  <div class="derOnlyOneContainer _containers">
    <!-- 
    :style="{
          transformOrigin: 'top left',
          left: `${left}px`,
          top: `${top}px`,
        }"
  -->
    <!-- 菜单禁止拖动 滚动逻辑未处理 -->
    <div class="start_page">
      <CommonBox location="start"></CommonBox>
    </div>
    <Title title="菜单" :allowMove="false" @close="close" @getPosition="getPosition" />
  </div>
</template>

<script>
import CommonBox from './commonBox.vue';
import closeIcon from '../../../assets/teaching/close.svg';
import Title from '../panel/title.vue';

export default {
  components: { CommonBox, Title },
  props: { value: Boolean },
  data() {
    return {
      left: 0,
      top: 0,
      status: false,
      closeIcon,
    };
  },
  watch: {},
  created() {},

  methods: {
    // Title 组件返回的 x, y值
    getPosition({ x, y }) {
      this.left = x;
      this.top = y;
    },
    close() {
      this.startPage = false;
      this.$emit('close');
    },
  },
};
</script>
<style lang="scss" scoped>
._containers {
  width: 60em;
  /* 880px converted to em */
  min-height: 36.25em;
  /* 580px converted to em */
  background: #fff;
  box-shadow: 0px 0px 1em 0px rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;
  border-radius: 0.875em;
  /* 7px converted to em */
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .start_page {
    flex: 1;
    display: flex;
    background: #fff;
    flex-direction: column;
    /* 将子元素垂直排列 */
    justify-content: center;
    /* 在垂直方向上居中对齐 */
    align-items: center;
    /* 在水平方向上居中对齐 */
  }
}
</style>